<template>
  <div class="receiveScreen">
    <div class="receiveHeader">
      <div class="title">海川收货数字看板3</div>
      <div class="currenttime">{{ currentTime }}</div>
    </div>
    <div class="decoration">
      <dv-decoration-3
        :color="['#247fea']"
        style="width: 270px; height: 20px"
      />
      <dv-decoration-3
        :color="['#247fea']"
        style="width: 270px; height: 20px"
      />
    </div>
    <div class="receiveContent">
      <div class="receiveContentTop">
        <dv-border-box-7>
          <div class="topContent">
            <div class="topItem">
              <div class="topItemTitle">预约量</div>
              <div class="topItemNumber">{{ resetCount }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>
            <div class="topItem">
              <div class="topItemTitle">审单完成<span>(件/条目)</span></div>
              <div class="topItemNumber">{{ sdwcjs }}/{{ sdwctms }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>

            <div class="topItem1">
              <div class="topItemTitle">待收货</div>
              <div class="topItemNumber">{{ dshjs }}/{{ dshtms }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>
            <div class="topItem1">
              <div class="topItemTitle">收货完成<span>(件/条目)</span></div>
              <div class="topItemNumber">{{ shwcjs }}/{{ shwctms }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>
            <div class="topItem2">
              <div class="topItemTitle">待验收</div>
              <div class="topItemNumber">{{ dysjs }}/{{ dystms }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>
            <div class="topItem2">
              <div class="topItemTitle">验收完成<span>(件/条目)</span></div>
              <div class="topItemNumber">{{ yswcjs }}/{{ yswctms }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>
            <div class="topItem3 itemborder3">
              <div class="topItemTitle">待上架</div>
              <div class="topItemNumber">{{ dsjjs }}/{{ dsjtms }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>
            <div class="topItem3">
              <div class="topItemTitle">上架完成<span>(件/条目)</span></div>
              <div class="topItemNumber">{{ sjwcjs }}/{{ sjwctms }}</div>
              <img src="@/assets/images/topImg.png" alt="" />
            </div>
          </div>
        </dv-border-box-7>
      </div>
      <div class="receiveContentBottom">
        <div class="recheckleft">
          <div class="leftTitle">
            异常未上架工作量排行榜
            <!-- <dv-decoration-7 style="width: 100%; height: 100%"
              >复核工作量排名</dv-decoration-7
            > -->
          </div>
          <div class="leftContent">
            <dv-scroll-ranking-board
              :config="config"
              style="width: 86%; height: 650px; margin: 40px 0 0 65px"
            />
          </div>
        </div>
        <div class="recheckright">
          <div class="leftTitle">
            收货各时段产能
            <!-- <dv-decoration-7
              class="decorationColor"
              style="width: 100%; height: 100%"
              >拣选&复核时段出库产能</dv-decoration-7
            > -->
          </div>
          <!-- <div class="number">
            <div class="numberItem">
              <span>7399</span>
              <span>行/时</span>
            </div>
            <div class="numberItem">
              <span>5333</span>
              <span>行/时</span>
            </div>
          </div> -->
          <div class="rightContent">
            <div style="height: 650px; width: 100%" ref="zechart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listsreenOne } from "@/api/system/receiveDigital";
import * as echarts from "echarts";

export default {
  data() {
    return {
      // 待收货
      dshjs: "",
      dshtms: "",
      // 待上架
      dsjjs: "",
      dsjtms: "",
      // 待验收
      dysjs: "",
      dystms: "",
      // 审单完成
      sdwcjs: "",
      sdwctms: "",
      // 收货完成
      shwcjs: "",
      shwctms: "",
      // 上架完成
      sjwcjs: "",
      sjwctms: "",
      // 验收完成
      yswcjs: "",
      yswctms: "",
      zchart: null,
      config: {
        rowNum: 7,
        data: [],
        // unit: "条",
        sort: false,
      },
      currentTime: "",
      // 柱状图定时平移
      timer: null,
      xAxisdata: [],
      yAxislddata: [],
      yAxissddata: [],
      yAxissjdata: [],
      yAxisysdata: [],
      // 预约量
      resetCount: "",
      // 接口1分钟刷新一次
      timeId: null,
    };
  },
  created() {
    setInterval(() => {
      this.currentTime = this.getCurrentTime();
    }, 1000);
    this.getsreenOne();
    // this.timeId = setInterval(() => {
    //   setTimeout(() => {
    //     this.getsreenOne();
    //   }, 0);
    // }, 60000);
  },
  mounted() {
    this.$nextTick(() => {
      this.zChart();
    });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    if (this.zchart) {
      this.zchart.dispose();
      this.zchart = null;
    }
  },
  destroyed() {
    clearInterval(this.timeId);
  },
  methods: {
    // 获取当天时间
    getCurrentTime() {
      const currentDate = new Date();
      const year = currentDate.getFullYear(); // 获取当前年份
      const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份是从0开始计数的，需要加1）
      const day = currentDate.getDate(); // 获取当前日期
      // const datePart = currentDate.toLocaleDateString();
      const timePart = currentDate.toLocaleTimeString();
      // const dateTimeString = `${datePart} ${timePart}`;
      const dateTimeString = `${year}/${month}/${day} ${timePart}`;
      return dateTimeString;
    },
    // 收货数量
    getsreenOne() {
      listsreenOne({type:3}).then((res) => {
        // 待收货
        let { dsh, dsj, dys, sdwc, shwc, sjwc, yswc } = res.data;
        this.dshjs = dsh.js;
        this.dshtms = dsh.tms;
        this.dsjjs = dsj.js;
        this.dsjtms = dsj.tms;
        this.dysjs = dys.js;
        this.dystms = dys.tms;
        this.sdwcjs = sdwc.js;
        this.sdwctms = sdwc.tms;
        this.shwcjs = shwc.js;
        this.shwctms = shwc.tms;
        this.sjwcjs = sjwc.js;
        this.sjwctms = sjwc.tms;
        this.yswcjs = yswc.js;
        this.yswctms = yswc.tms;
        // 昨日未上架工作量排行
        this.config.data = [];
        res.data.receiveList.map((item) => {
          this.config.data.push({
            name: item.name,
            value: Number(item.tms)+'条/'+Number(item.js)+"件",
          });
          this.config = { ...this.config };
        });
        res.data.hourCount.map((item) => {
          this.xAxisdata.push(item.tm);
          this.yAxislddata.push(item.ld);
          this.yAxissddata.push(item.sd);
          this.yAxissjdata.push(item.sj);
          this.yAxisysdata.push(item.ys);
          this.zChart();
        });
        // 预约量
        this.resetCount = res.data.yyCount;
      });
    },
    zChart() {
      // 解决echarts dom已经加载的报错
      echarts.init(this.$refs.zechart).dispose();
      this.zchart = echarts.init(this.$refs.zechart);
      const option = {
        // title: {
        //   text: "Rainfall vs Evaporation",
        //   subtext: "Fake Data",
        // },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["审单", "录单", "验收", "上架"],
          // bottom: "0px",
          textStyle: {
            color: "#fff",
            fontSize: 28,
          },
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        // calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.xAxisdata,
            axisLabel: { show: true, fontSize: 22, color: "#cdd3ee" },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：行",
            nameTextStyle: {
              color: "#657c97",
              // padding : [5, 0, 0, 20],
              fontSize: 14,
            },
            position: "left",
            alignTicks: true,
            axisLine: {
              // show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: { show: true, fontSize: 20, color: "#cdd3ee" },
          },
        ],
        series: [
          {
            name: "审单",
            type: "bar",
            data: this.yAxissddata,
            barMaxWidth: 10,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: "#8533fa",
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#ffffff", // 设置字体颜色为红色
            //   },
            // },
          },
          {
            name: "录单",
            type: "bar",
            data: this.yAxislddata,
            barMaxWidth: 10,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: "#4ffa67",
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#ffffff", // 设置字体颜色为红色
            //   },
            // },
          },
          {
            name: "验收",
            type: "bar",
            data: this.yAxisysdata,
            barMaxWidth: 10,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: "#ff8e1b",
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#ffffff", // 设置字体颜色为红色
            //   },
            // },
          },
          {
            name: "上架",
            type: "bar",
            data: this.yAxissjdata,
            barMaxWidth: 10,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: "#0f8bfd",
            },
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "#ffffff", // 设置字体颜色为红色
            //   },
            // },
          },
        ],
        dataZoom: [
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "inside", // 这个 dataZoom 组件是 inside,slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 6, // 一次性展示4个。
          },
        ],
      };

      if (this.xAxisdata.length > 0) {
        let that = this;
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
          if (option.dataZoom[0].endValue == this.xAxisdata.length) {
            option.dataZoom[0].startValue = 0;
            option.dataZoom[0].endValue = 6;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          that.zchart.setOption(option);
          console.log("that.zchart", that.zchart);
        }, 5000);
      }
      this.zchart.setOption(option);
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", () => {
        if (this.zchart) {
          this.zchart.resize();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.receiveScreen {
  width: 100%;
  height: 1100px;
  background: #05164b;
  .receiveHeader {
    width: 100%;
    height: 80px;
    background: url("../../assets/images/receiveHeader.png") center center
      no-repeat;
    background-size: 70%;
    text-align: center;
    color: rgb(255, 255, 255);
    position: relative;
    .title {
      padding: 8px 0 0 0;
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 10px;
    }
    .currenttime {
      font-size: 26px;
      font-weight: 700;
      position: absolute;
      right: 30px;
      top: 30px;
    }
  }
  .decoration {
    margin-top: -70px;
    display: flex;
    justify-content: space-between;
  }
  .receiveContent {
    width: 100%;
    // height: 1020px;
    height: 93vh;
    padding: 30px 20px;
    .receiveContentTop {
      height: 200px;
      margin-top: 20px;
      .topContent {
        height: 100%;
        padding: 5px;
        display: flex;
        align-items: center;
        // background: #01175a;
        .topItem {
          width: 12.5%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-right: 1px solid #ffffff48;
          .topItemTitle {
            font-size: 30px;
            color: #8533fa;
            font-weight: 700;
            span {
              font-size: 16px;
            }
          }
          .topItemNumber {
            margin: 10px 0;
            font-size: 30px;
            color: #ffffff;
            font-weight: 700;
          }
          img {
            width: 35%;
          }
        }
        .topItem1 {
          width: 12.5%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-right: 1px solid #ffffff48;
          .topItemTitle {
            font-size: 30px;
            color: #4ffa67;
            font-weight: 700;
            span {
              font-size: 16px;
            }
          }
          .topItemNumber {
            margin: 10px 0;
            font-size: 30px;
            color: #ffffff;
            font-weight: 700;
          }
          img {
            width: 35%;
          }
        }
        .topItem2 {
          width: 12.5%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-right: 1px solid #ffffff48;
          .topItemTitle {
            font-size: 30px;
            color: #ff8e1b;
            font-weight: 700;
            span {
              font-size: 16px;
            }
          }
          .topItemNumber {
            margin: 10px 0;
            font-size: 30px;
            color: #ffffff;
            font-weight: 700;
          }
          img {
            width: 35%;
          }
        }
        .topItem3 {
          width: 12.5%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .topItemTitle {
            font-size: 30px;
            color: #0f8bfd;
            font-weight: 700;
            span {
              font-size: 16px;
            }
          }
          .topItemNumber {
            margin: 10px 0;
            font-size: 30px;
            color: #ffffff;
            font-weight: 700;
          }
          img {
            width: 35%;
          }
        }
        .itemborder3 {
          border-right: 1px solid #ffffff48;
        }
      }
    }
    .receiveContentBottom {
      height: 800px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .recheckleft {
        width: 49%;
        // border: 1px solid #05506950;
        background: url("../../assets/images/checkbg1.png") center center
          no-repeat;
        // text-align: center;
        // background-size: 110% 120%;
        // background-size: 100% 102%;
        // background-size: 120% 120%;
        background-size: 115% 130%;
        .leftTitle {
          height: 120px;
          line-height: 120px;
          text-align: center;
          margin: 10px 0 0 100px;
          // background: url("../../assets/images/titlebg.png") left center
          //   no-repeat;
          // background: url("../../assets/images/titlebg.png") center center
          //   no-repeat;
          // background-size: 30%;
          color: #56c7ff;
          font-size: 34px;
          font-weight: 700;
        }
        .leftContent {
          margin-top: -70px;
          width: 100%;
          height: 700px;
          ::v-deep .dv-scroll-ranking-board {
            text-align: left;
            color: #7efff5;
          }
          ::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
            // background: #2bcbba;
            background: #56c7ff;
          }
          ::v-deep .dv-scroll-ranking-board .ranking-info {
            font-size: 28px;
            font-weight: 700;
          }
          ::v-deep .dv-scroll-ranking-board .ranking-info .rank {
            width: 80px;
            color: #fc5c65;
          }
          ::v-deep .dv-scroll-ranking-board .ranking-column {
            border-bottom: 1px solid #f5efe3;
          }
          .chart {
            height: 100%;
          }
        }
      }
      .recheckright {
        width: 49%;
        // border: 1px solid #05506950;
        background: url("../../assets/images/checkbg.png") center center
          no-repeat;
        // text-align: center;
        // background-size: 110% 120%;
        // background-size: 100% 102%;
        // background-size: 120% 120%;
        background-size: 115% 130%;
        padding: 10px;
        .leftTitle {
          height: 120px;
          line-height: 120px;
          text-align: center;
          margin: 0 0 0 -100px;
          // background: url("../../assets/images/titlebg.png") left center
          //   no-repeat;
          // background: url("../../assets/images/titlebg.png") center center
          //   no-repeat;
          // background-size: 30%;
          color: #61aefc;
          font-size: 34px;
          font-weight: 700;
        }
        .number {
          width: 90%;
          padding: 0 0 10px 60px;
          display: flex;
          justify-content: space-between;
          .numberItem {
            width: 45%;
            // background: url("../../assets/images/barTitle.png") left center
            //   no-repeat;
            // background-size: 60%;
            height: 50px;
            line-height: 50px;
            color: #fff;
            text-align: center;
            background: linear-gradient(
              to bottom,
              #ffffff28,
              #ffffff09,
              #ffffff00
            );
            span:nth-child(1) {
              font-size: 26px;
              font-weight: 700;
              color: #2edef5;
              padding: 0 10px;
            }
            span:nth-child(2) {
              font-size: 20px;
              color: #d3eefd;
            }
          }
        }
        .rightContent {
          width: 100%;
          height: 650px;
          // .zchart {
          //   height: 100%;
          //   width: 100%;
          // }
        }
      }
    }
  }
}
</style>